<template>
  <div>
    <h-table-list
      type="local"
      :data="tableData"
      border
      :page-sizes="[5, 10]"
      :columns="columns"
      :form-options="formOptions"
    >
      <!-- <ListOpearteButton /> -->
      <div>
        <el-button @click="add">新增巡检项</el-button>
        <el-button @click="add">批量批量导入</el-button>
        <el-button @click="add">批量导入下载模板</el-button>
      </div>
      <template slot="preview-column" slot-scope="scope">
        <div>{{ scope.row.status }}</div>
      </template>

      <template slot="operate-btn" slot-scope="scope">
        <div>
          <el-button @click="edit(scope.row.id)">编辑</el-button>
          <el-button @delete="deleted(scope.row.id)">删除</el-button>
        </div>
      </template>
    </h-table-list>
    <DownloadIdentify
      @cancel="cancel"
      @update="addChooseDevices"
      :visible.sync="dialogDeviceVisible"
      title="添加巡检项"
    >
      <div class="checked-device">
        <el-button @click="addCheckedNocontentItem">添加空白巡检项</el-button>
        <el-form
          :model="productRuleForm"
          ref="productRuleForm"
          :rules="productRuleForm.rules"
          :show-message="false"
        >
          <h-table-list
            border
            type="local"
            :data="productRuleForm.tableData"
            :page-sizes="[10, 20]"
            :columns="column2s"
          >
            <!--用插槽templete占位替换自定义部分 -->
            <template slot="operate-part" slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.part'"
                :rules="productRuleForm.rules.part"
              >
                <el-input
                  v-model="productRuleForm['tableData'][scope.$index].part"
                ></el-input>
              </el-form-item>
            </template>
            <template slot="operate-content" slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.content'"
                :rules="productRuleForm.rules.content"
              >
                <el-input
                  v-model="productRuleForm['tableData'][scope.$index].content"
                ></el-input>
              </el-form-item>
            </template>
            <template slot="operate-standard" slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.standard'"
                :rules="productRuleForm.rules.standard"
              >
                <el-input
                  v-model="productRuleForm['tableData'][scope.$index].standard"
                ></el-input>
              </el-form-item>
            </template>
            <template slot="operate-method" slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.method'"
                :rules="productRuleForm.rules.method"
              >
                <el-input
                  v-model="productRuleForm['tableData'][scope.$index].method"
                ></el-input>
              </el-form-item>
            </template>
            <template slot="is-uploadimg" slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.upPicFlag'"
                :rules="productRuleForm.rules.upPicFlag"
              >
                <el-select
                  v-model="productRuleForm['tableData'][scope.$index].upPicFlag"
                >
                  <el-option :value="0" :label="'不上传'"></el-option>
                  <el-option :value="1" :label="'选填'"></el-option>
                  <el-option :value="2" :label="'必填'"></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template slot="is-uploadvideo" slot-scope="scope">
              <el-form-item
                :prop="'tableData.' + scope.$index + '.upVideoFlag'"
                :rules="productRuleForm.rules.upVideoFlag"
              >
                <el-select
                  v-model="
                    productRuleForm['tableData'][scope.$index].upVideoFlag
                  "
                >
                  <el-option :value="0" :label="'不上传'"></el-option>
                  <el-option :value="1" :label="'选填'"></el-option>
                  <el-option :value="2" :label="'必填'"></el-option>
                </el-select>
              </el-form-item>
            </template>
            <template slot="operate-button">
              <el-button>删除</el-button>
            </template>
          </h-table-list>
        </el-form>
      </div>
    </DownloadIdentify>
  </div>
</template>

<script>
import ListOpearteButton from "@/components/AllButton/button2";
import DownloadIdentify from "@/components/FormDialog";
export default {
  components: { ListOpearteButton, DownloadIdentify },
  data() {
    return {
      productRuleForm: {
        tableData: [
          {
            part: "", //巡检部位
            content: "", //巡检内容
            standard: "", //巡检基准 非必须
            method: "", //巡检方法 非必须
            upPicFlag: "", //上传图片 0不上传 1选填 2必填
            upVideoFlag:"" //上传图片 0不上传 1选填 2必填
          }
        ],
        rules: {
          part: [{ required: true, message: "请选择日期", trigger: "blur" }],
          content: [{ required: true, message: "请输入姓名", trigger: "blur" }],
          standard: [
            { required: true, message: "请输入电话号码", trigger: "blur" }
          ],
          method: [{ required: true, message: "请输入地址", trigger: "blur" }],
          upPicFlag: [
            { required: true, message: "请输入地址", trigger: "blur" }
          ],
          upVideoFlag: [
            { required: true, message: "请输入地址", trigger: "blur" }
          ]
        }
      },
      column2s: [
        { type: "index", label: "序号" },
        { prop: "id", label: "序号", width: 140 },
        {
          prop: "name",
          label: "巡检部位",
          minWidth: 180,
          slotName: "operate-part"
        },

        {
          prop: "deviceName",
          label: "巡检内容",
          width: 100,
          slotName: "operate-content"
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.name ? deviceInfo.name :"";
          // },
        },
        {
          prop: "deviceNumber",
          label: "巡检基准",
          width: 100,
          slotName: "operate-standard"
          // render: (row) => {
          //   const { deviceInfo } = row;
          //   return deviceInfo.deviceNumber ? deviceInfo.deviceNumber :"";
          // },
        },
        // { prop: "departmentName", label: "使用部门", minWidth: 180, render: (row) => {
        //     const { departmentInfo } = row;
        //     return departmentInfo.name ? departmentInfo.name :"";
        //   },},
        {
          prop: "departmentName",
          label: "巡检方法",
          minWidth: 180,
          slotName: "operate-method"
        },
        {
          prop: "membName",
          label: "上传图片",
          minWidth: 180,
          slotName: "is-uploadimg"
        },
        {
          prop: "membName",
          label: "上传视频",
          minWidth: 180,
          slotName: "is-uploadvideo"
        },
        {
          prop: "operate",
          label: "操作",
          minWidth: 240,
          slotName: "operate-button"
        }
      ],
      dialogDeviceVisible: false,
      formOptions: {
        inline: true,
        submitBtnText: "搜索",
        forms: [
          {
            prop: "itemGId",
            label: "分组",
            itemType: "select",
            options: [
              { value: "", label: "部门1" },
              { value: 0, label: "部门2" },
              { value: 1, label: "部门3" }
            ]
          },
          { prop: "part", label: "巡检部位" },

          { prop: "content", label: "巡检内容" }
        ]
      },
      columns: [
        { prop: "name", label: "分组", width: 140 },
        { prop: "part", label: "巡检部位", minWidth: 180 },
        {
          prop: "content",
          label: "巡检内容",

          width: 100
        },
        {
          prop: "standard",
          label: "巡检基准",
          width: 100,
          render: row => {
            const { sex } = row;
            return sex === 0 ? "Male" : sex === 1 ? "Female" : "Unknow";
          }
        },
        { prop: "method", label: "巡检方法", minWidth: 180 },
        { prop: "upPicFlag", label: "上传图片", minWidth: 180 },
        { prop: "upVideoFlag", label: "上传视频", minWidth: 180 },
        {
          prop: "operate",
          label: "操作",
          slotName: "operate-btn",
          minWidth: 180
        }
      ],
      tableData: [
        { name: "1", mobile: "15299xxxx", sex: 0 },
        { name: "2", mobile: "13452xxxx", sex: 1 },
        { name: "3", mobile: "187233xxxx", sex: 0, status: "0" }
      ]
    };
  },
  methods: {
    add() {
      this.dialogDeviceVisible = true;
    },
    edit() {
      this.dialogDeviceVisible = true;
    },
    addChooseDevices() {
      this.dialogDeviceVisible = false;
    },
    addCheckedNocontentItem() {
      //添加空白巡检项
      //this.tableData2s.push({id:this.tableData2s.length})
      this.productRuleForm.tableData.push({
        date: "",
        name: "",
        phone: "",
        address: ""
      });
    }
  }
};
</script>
